<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息中心</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/util.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .container {
            margin-top: 20px;
        }
        .message-list {
            margin-bottom: 20px;
        }
        .message-item {
            margin-bottom: 10px;
            padding: 15px;
            border-radius: 5px;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .message-date {
            font-size: 0.9em;
            color: #6c757d;
        }
        .no-messages {
            text-align: center;
            margin-top: 20px;
            font-size: 1.2em;
            color: #6c757d;
        }
    </style>
</head>
<body>

<div class="container" id="app">
    <h1 class="mb-4">消息中心</h1>
    <div v-if="messages.length > 0" class="message-list">
        <div class="message-item" v-for="message in messages" :key="message.informationId">
            <h5>{{ message.informationValue }}</h5>
            <p class="message-date">{{ formatDateTime(message.informationDate) }}</p>
        </div>
    </div>
    <div v-else class="no-messages">
        <p>暂无消息</p>
    </div>
</div>

<script>
    $(function () {
        function LoginVerify() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "loginVerify",
                    type: "get",
                    dataType: "json",
                    success: function(response) {
                        if (response.state == 300) {
                            alert(response.message);
                            window.location.href = "login.html";
                        } else {
                            resolve(response.data.loginUser.studentId);
                        }
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        // 使用 Vue.js 来管理消息列表
        const app = new Vue({
            el: '#app',
            data: {
                messages: []
            },
            methods: {
                formatDateTime(dateTimeString) {
                    const date = new Date(dateTimeString);
                    const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
                    return date.toLocaleDateString(undefined, options);
                }
            },
            created: function() {
                LoginVerify()
                    .then(studentId => {
                        $.ajax({
                            url: "information/" + studentId,
                            type: "get",
                            dataType: "json",
                            success: (data) => {
                                this.messages = data;
                                console.log(data);
                            },
                            error: (xhr, status, error) => {
                                console.error("获取消息失败:", error);
                            }
                        });
                    })
                    .catch(error => {
                        console.error("登录验证失败:", error);
                    });
            }
        });
    });
</script>

</body>
</html>



